<style type="text/css">
    .action-cell {
        margin-bottom: 20px;
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
        justify-content: space-between;
        align-items: center;
        margin-right: 20%;
    }

    .search-block {
        display: flex;
        margin-bottom: 10px;
    }

    .input-search {
        margin-right: 10px;
    }
    .ivu-modal-content{
        max-height: 600px;
        overflow: auto;
    }
</style>
<template>
    <div style="min-width: 1024px">
        <h4>类型&权限</h4>
        <Alert show-icon>
            此处用于类型&权限管理。
        </Alert>

        <ButtonGroup>
            <Button type="success" @click="addModal=true">
                <Icon type="md-add-circle"/>
                添加
            </Button>
            <Button type="warning" :disabled="deleteBtnEnable" @click="remove">
                <Icon type="md-close-circle"/>
                删除
            </Button>
        </ButtonGroup>
        <Row>
            <Col span="12">
                <Table :context="self" :data="tableData" :columns="tableColumns" stripe border
                       @on-select="tableItemChecked" @on-select-cancel="tableItemChecked"
                       @on-select-all="tableItemChecked"
                       @on-select-all-cancel="tableItemChecked"
                       style="margin-top:15px;">
                </Table>
            </Col>
        </Row>
        <Modal v-model="addModal" title="添加" @on-ok="handleSubmit('formValidate')"
               @on-cancel="setPwdIsShow =false">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
                <Form-item label="人员权限" prop="title">
                    <i-input v-model="formValidate.title" placeholder="请输入人员权限"></i-input>
                </Form-item>
<!--                <Form-item label="类型级别" prop="peopletypelevel">-->
<!--                    <i-input v-model="formValidate.peopletypelevel" type="number" placeholder="取值范围（1-99），值越大表示级别职能权限越低"></i-input>-->
<!--                </Form-item>-->
<!--                <Tree :show-checkbox="showCheckbox" :data="menuTreeData" @on-check-change="checkAllBoxEvent"></Tree>-->
            </Form>
        </Modal>
        <!--编辑-->
        <Modal v-model="editIsShow" title="编辑" @on-ok="handleSubmitEdit('formValidate2')"
               @on-cancel="editIsShow =false">
            <Form ref="formValidate2" :model="formValidate2" :label-width="100">
                <Form-item label="人员类型" prop="peopletypetitle">
                    <i-input v-model="formValidate2.peopletypetitle" placeholder="请输入人员类型"></i-input>
                </Form-item>
                <Form-item label="类型级别" prop="peopletypelevel">
                    <i-input v-model="formValidate2.peopletypelevel" type="number" placeholder="请输入0-99的数字"></i-input>
                </Form-item>
                <Tree :show-checkbox="showCheckbox" :data="menuTreeDataEdit"
                      @on-check-change="checkAllBoxEventEdit"></Tree>
            </Form>
        </Modal>
    </div>
</template>
<script>
    import apiUtil from '../../assets/utils/api_util';
    import baseUtil from '../../assets/utils/base-util';

    export default {
        data() {
            return {
                self: this,
                tableData: [],
                //添加
                addModal: false,
                formValidate: {
                    //添加字段
                    title: '',
                },
                //编辑
                editIsShow: false,
                formValidate2: {
                    //添加字段
                    peopletypetitle: '',
                    peopletypelevel: '',
                    Id: '',
                },
                //菜单(tree)
                menuTreeData: [],
                showCheckbox: true,
                DefaultRoles: '',
                //菜单_编辑(tree)
                menuTreeDataEdit: [],
                DefaultRolesEdit: '',
                //操作按钮状态管理
                deleteBtnEnable: true,
                selectedItems: [],
                //表单
                ruleValidate: {},
                tableColumns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '人员类型',
                        key: 'Levelname',
                        align: 'PeopleTypeLevel',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        style: {
                                            'margin-right': '10px',
                                        },
                                        on: {
                                            click: () => {
                                                this.jumpPage(params.row.Id,'peopleSetRight')
                                            }
                                        }
                                    }, '编辑角色权限'),
                                    // h('Button', {
                                    //     props: {
                                    //         type: 'primary',
                                    //         size: 'small'
                                    //     },
                                    //     style: {
                                    //         'margin-right': '10px',
                                    //     },
                                    //     on: {
                                    //         click: () => {
                                    //             this.jumpPage(params.row.Id,'peopleSetRight')
                                    //         }
                                    //     }
                                    // }, '查看拥有权限'),
                                ]
                            )

                        }
                    }
                ]
            }
        },
        mounted() {
            this.mockTableData();
            this.getMenuData();
        },
        components: {},
        methods: {
            handleSubmit(name) {
                let that = this;
                let model = this.$refs[name].model;
                this.$refs[name].validate((valid) => {
                    that.comfirmModifyPS(model);
                })
            },
            comfirmModifyPS: function (model) {
                let that = this;
                let params = that.$qs.stringify(model);
                apiUtil.post(that, apiUtil.urls.AddPeopleType, params, function (res) {
                    that.mockTableData();
                    baseUtil.handleReset(that,'formValidate')
                });
            },
            //跳转
            jumpPage: function (id, url) {
                //跳转
                let route = '';
                if (id > 0) {
                    route = {
                        path: url,
                        query: {
                            id: id,
                            type: 1,
                        },
                    };
                } else {
                    route = {
                        path: url,
                    };
                }

                this.$router.push(route);
            },
            // 表格内选中及取消选中操作
            tableItemChecked: function (selection, row) {

                this.selectedItems = selection;
                console.log('选择删除项:', selection);

                if (this.selectedItems.length > 1) {
                    // 此处添加不要多选的提示
                    this.$Message.warning('此处不允许批量删除 ');
                    this.deleteBtnEnable = true;

                } else {
                    this.deleteBtnEnable = false;
                }
            },
            //删除
            remove: function () {
                let self = this;
                let that = this;
                this.$Modal.confirm({
                    title: '操作警告',
                    content: '即将删除选中的人员角色项，该操作不可逆转，请确认您的操作。',
                    onOk: function () {
                        this.$Loading.start();
                        var selectedItemIds = "";
                        for (var i = 0; i < that.selectedItems.length; i++) {
                            selectedItemIds += that.selectedItems[i].Id.toString() + ",";
                        }
                        selectedItemIds = selectedItemIds.substring(0, selectedItemIds.length - 1);
                        let para = {id: selectedItemIds};
                        let params = that.$qs.stringify(para);

                        apiUtil.post(that, apiUtil.urls.DelPeopleType, params, function (res) {
                            that.$Message.success('删除成功。');
                            that.mockTableData();
                        });
                    }
                });
            },
            //列表总数据
            mockTableData() {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GetPeopleTypes, params, function (res) {
                    that.$Loading.finish();
                    that.tableData = res.Msg;

                    console.log('res:', res)
                });

            },
            //添加tree
            addTreeClickEvent: function (data) {
                console.log('菜单数据:', data);
            },
            checkAllBoxEvent: function (data) {
                console.log('tree的数据：', data);
                let postTreeArr = [];
                data.forEach(function (item) {
                    postTreeArr.push(item.id)
                });

                this.DefaultRoles = postTreeArr.join();
                console.log('postTreeArr:', postTreeArr.join())
            },
            //获取菜单
            getMenuData() {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GetMenu, para, function (res) {
                    that.$Loading.finish();

                    that.menuTreeData = res.Msg;
                    console.log('menuTreeData:', that.menuTreeData)

                });
            },

            //点击编辑
            editClick: function (row) {
                let that = this;
                this.editIsShow = true;
                this.formValidate2.Id = row.Id;
                this.formValidate2.peopletypelevel = row.PeopleTypeLevel;
                this.formValidate2.peopletypetitle = row.PeopleTypeTitle;

                let roles = row.DefaultRoles.split(',');
                if (row.DefaultRoles) {
                    that.menuTreeData.forEach(function (item2, j) {
                        item2.children.forEach(function (item3, z) {
                            if (roles.indexOf((item3.id).toString()) > -1) {
                                item3.checked = true;
                                // console.log('进，相同的id')
                            }
                            // console.log('进，item3,', item3.id)
                        })
                    })
                }


                that.menuTreeDataEdit = that.menuTreeData;

            },
            handleSubmitEdit(name) {
                let that = this;
                let model = this.$refs[name].model;
                this.$refs[name].validate((valid) => {
                    that.comfirmModifyPSEdit(model);
                })
            },
            comfirmModifyPSEdit: function (model) {
                let that = this;
                let params = {};
                params = that.$qs.stringify(model);
                console.log('params:', params);
                apiUtil.post(that, apiUtil.urls.EditPeopleType, params, function (res) {
                    that.$Message.info('修改成功 ');
                    that.mockTableData();

                });
            },
        },
    }
</script>
